<template>
    <div>
        <header class="header-content">
            <div class="header-icon-back" @click="to('user')"><span></span></div>
            <div class="header-title">订单管理</div>
        </header>
        <div class="project-bar">
            <span v-for="(target,id) in tagList" :key="id" :class="{'active':flag==id}" @click="changePage(id)">{{target.name}}</span>
            </div>
        <div class="order-cell">
            <div class="order-cell-head"><span>单号：123456</span><span class="order-cell-special">交易成功</span></div>
            <div class="order-cell-content">
                <div class="order-goods">
                    <div class="goods-img"><img src="../assets/car/pro3.jpg"></div>
                    <div class="goods-details">
                        <div class="goods-name">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</div>
                        <div class="spec">规格：红色，23</div>
                        <div class="price-volume">
                            <span class="unit-price">¥296</span>
                            <span class="spinner">数量*1</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-cell-total">
                <div class="order-total-content"><span>共2件商品，</span><span class="unit-price">总金额：10000.00元</span><span>（含运费：100元）</span></div>
            </div>
            <div class="order-operation">
                <div class="order-operation-cell"><span>删除订单</span><span class="order-operation-special">评价</span></div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    @import "../css/style.css";
    .project-bar {
        font-size: 14px;
        color: #888;
        padding: 0.9375rem;
        display: flex;
        justify-content: space-around;
        background: #fff;
        border-bottom: 0.1rem solid #f5f5f5;
    }
   .project-bar .active{
       color: #e21323;
    font-weight: bold;
    border-bottom: 0.2rem solid #e21323;
   }
    .order-cell {
        background: #fff;
        padding: 0 0.9375rem;
    }
    .order-cell-head {
        color: #999;
        font-size: 0.8125rem;
        padding: 0.625rem 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 0.0625rem solid #f5f5f5;
    }
    .order-cell-special {
        color: #ee7800;
    }
    .order-cell-content {
        padding: 0 0.9375rem;
    }
    .order-goods {
        display: flex;
        padding: 0.625rem 0;
        border-bottom: 0.0625rem solid #f5f5f5;
    }
    .order-goods img {
        width: 5rem;
        height: 5rem;
        margin-right: 0.625rem;
    }
    .goods-name {
        font-size: 0.875rem;
        font-weight: normal;
        color: #232323;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .spec {
        font-size: 0.812rem;
        color: #454545;
        width: 100%;
    }
    .price-volume {
        display: flex;
        justify-content: space-between
    }
    .unit-price {
        color: #e21323;
    }
    .spinner {
        font-size: 0.75rem;
        color: #454545;
    }
    .order-cell-total {
        padding: 0 0.9375rem;
    }
    .order-total-content {
        text-align: right;
        font-size: 0.75rem;
        padding: 0.625rem 0;
        border-bottom: 0.0625rem solid #f5f5f5;
    }
    .order-operation {
        padding: 0 0.9375rem;
        border-bottom: 0.1rem solid #f5f5f5;
    }
    .order-operation-cell {
        text-align: right;
        font-size: 0.96rem;
        padding: 0.625rem 0;
    }
    .order-operation-cell span {
        color: #333;
        padding: 0.18rem 0.9375rem;
        border: 0.0625rem solid #333;
        border-radius: 0.18rem;
    }
    .order-operation-cell .order-operation-special {
        margin-left: 0.625rem;
        color: #e07100;
        border: 0.0625rem solid #e07100;
    }
</style>
<script>
    export default {
        data(){
            return{
                flag:-1,
               tagList:[
                   {name:"全部",id:0},
                   {name:"待付款",id:1},
                   {name:"待发货",id:2},
                   {name:"待收货",id:3},
                   {name:"待评价",id:4},
               ] 
            }
        },
        methods: {
            to(page) {
                this.$router.push({
                    name: page
                })
            },
            changePage(id){
               this.flag=id
            }
        }
    }
</script>
  